import React, { Component } from 'react';
import { Form, Input, message, Modal, Select } from 'antd';
import { SimpleSaveHoc } from '@/common/Hoc/SimpleSaveHoc';
import { TableMethods } from '@/common/Hoc/data';
import { saveUser } from '@/services/users';
import { nickName, password, username } from '@/pages/base/User/form/validate';
import { selectAll } from '@/services/role';

const FormItem = Form.Item;
const { Option } = Select;

const baseMethods: TableMethods = {
  getSave: (param: any) => saveUser(param),
};

@SimpleSaveHoc(baseMethods)
// @ts-ignore
@Form.create()
export default class extends Component<any, any> {
  constructor(props: any) {
    super(props);
  }

  state: any = {
    roles: [],
  };

  formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 13 },
  };

  componentDidMount(): void {
    selectAll().then((res: any) => {
      if (res.status === 0) {
        this.setState({
          roles: res.data,
        });
      } else {
        message.error(res.msg);
      }
    });
  }

  convertRoleValue(roles: []) {
    if (roles) {
      return roles.map((item: any) => item.id);
    } else {
      return [];
    }
  }
  renderOptions = () => {
    return this.state.roles.map((item: any) => (
      <Option key={item.id} title={item.roleName} value={item.id}>
        {item.roleName}
      </Option>
    ));
  };
  render() {
    const { modalVisible, currentData, form, loading, saveData } = this.props;

    const filterData = (data: any) => {
      let roles = '';
      if (data.roles) {
        roles = data.roles.join(',');
      }
      data.roleIds = roles;
    };

    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title="用户管理"
        confirmLoading={loading}
        visible={modalVisible}
        onCancel={() => this.props.handleModalVisible(false)}
        onOk={() => saveData(form, currentData, filterData)}
      >
        <FormItem key="username" {...this.formLayout} label="用户名">
          {form.getFieldDecorator('username', {
            initialValue: currentData.username,
            rules: username,
          })(<Input placeholder="请输入用户名" />)}
        </FormItem>
        <FormItem key="password" {...this.formLayout} label="密码">
          {form.getFieldDecorator('password', {
            initialValue: currentData.password,
            rules: password,
          })(<Input placeholder="请输入密码" />)}
        </FormItem>

        <FormItem key="nickName" {...this.formLayout} label="姓名">
          {form.getFieldDecorator('nickName', {
            initialValue: currentData.nickName,
            rules: nickName,
          })(<Input placeholder="请输入用户姓名" />)}
        </FormItem>

        <FormItem key="roles" {...this.formLayout} label="角色">
          {form.getFieldDecorator('roles', {
            initialValue: this.convertRoleValue(currentData.roles),
          })(
            <Select style={{ width: '100%' }} mode="multiple" placeholder="请选择角色">
              {this.renderOptions()}
            </Select>,
          )}
        </FormItem>
      </Modal>
    );
  }
}
